<template>
  <p>个人设置页</p>
  <div>
    修改手机号: <input type="text" v-model="phone" placeholder="请输入新手机号">
  </div>
  <div>
    <button @click="updateUserInfo">修改手机号</button>
  </div>
</template>


<script>
import {mapState} from 'vuex'
export default {
  data(){
    return {
      phone:''
    }
  },
  computed:{
    ...mapState(['userInfo'])
  },
  methods:{
    updateUserInfo(){
      // 合并数据
      const newUserInfo = {...this.userInfo, phone: this.phone}
      this.$store.commit('updateUserInfo', newUserInfo)
      alert('修改成功')
      this.$router.push({path:'/user'})
    }
  }
}

</script>